<template>
    <div>
        <a-card>
            <a-row :gutter="[10,2]">
                <!--分类开始-->
                <!--z-index 调整兄弟层级-->
                <a-col style="z-index: 2" :span="5">
                    <a-row style="height: 550px">
                        <a-col :span="15">
                            <!--一级分类列表-->
                            <a-list :split="false" size="small" :data-source="treeData"
                                    style="display:inline-block;height: 100%;;font-size:14px;">
                                <a-list-item class="cate-item"
                                             style="font-size: 14px;margin: 0;line-height:25px;height: 27px"
                                             slot="renderItem"
                                             slot-scope="cate1, index">
                                <span :id="cate1.id" @mouseover="showCate2(cate1,true,$event)"
                                      @mouseleave="showCate2(cate1,true,$event)">
                                    {{cate1.name}}
                                </span>
                                </a-list-item>
                            </a-list>
                        </a-col>
                        <a-col :span="9">
                            <!--二级分类和三级分类卡片-->
                            <a-card @mouseleave="showCate2(null,false)" class="cate23Card" v-if="cate2Visible">
                                <a-row v-for="cate2 in cate2Data" :key="cate2.id" style="margin:0 10px 10px 10px">
                                    <!--二级分类-->
                                    <a-col :span="3">
                                        <span class="cate-item cate2-item">{{cate2.name}}  ></span>
                                    </a-col>
                                    <!--三级分类-->
                                    <a-col :span="21">
                                        <a type="link" class="cate3-item" style="margin:0px 10px 10px 5px;"
                                           @click="toSearch(cate3)"
                                           v-for="cate3 in cate2.children">{{cate3.name}}
                                        </a>

                                    </a-col>
                                </a-row>

                            </a-card>
                        </a-col>
                    </a-row>

                </a-col>
                <!--分类结束-->
                <!--轮播图开始-->
                <a-col style="z-index: 1" :span="12">
                    <swiper-common style="width: 100%;height: 100%" :picture-list="carouselPictureList">

                    </swiper-common>

                </a-col>
                <!--轮播图结束-->
                <!--热门品牌开始-->
                <a-col :span="7">
                    <a-card title="热门品牌">
                        <a-card-grid v-for="brand in hotBrandList" style="width:33.3%;text-align:center"
                                     @click="toBrandShop(brand.shopUrl)">
                            <div v-if="brand.logo">
                                <a :href="brand.shopUrl"><img style="width: 100px" :src="brand.logo"/></a>
                            </div>
                            <div v-else>
                                <a :href="brand.shopUrl">{{brand.name}}</a>
                            </div>
                        </a-card-grid>

                    </a-card>

                </a-col>
                <!--热门品牌结束-->
            </a-row>


        </a-card>
        <a-divider orientation="left">
            <!--            <div style="font-size: 30px;font-weight: 700;color: #ef601d"></div>-->
        </a-divider>
        <a-row :gutter="[24,8]" style="margin-left: 20px">
            <a-col :span="24">
                <a-card hoverable style="width: 100%;background-color: #E72D21;padding: 0px" @click="toKillPage">
                    <!-- <img
                             slot="cover"
                             alt="example"
                             src="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/613f39ecb60e42dfec798a4ffc0bc012.png"/>-->
                    <div style="width: 100%;height: 320px;background-size:350px 450px;background-position:-80px -70px;background-image:url('https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/613f39ecb60e42dfec798a4ffc0bc012.png');background-repeat: no-repeat">
                        <div class="sec-kill-title">
                            麦猫秒杀
                        </div>
                    </div>

                </a-card>
            </a-col>
           <!-- <a-col :span="19">
                <a-row :gutter="[255,3]">
                    <a-col v-for="i in 4" :span="4">
                        <a-card hoverable style="width: 240px" title="今日秒杀">

                            <img
                                    slot="cover"
                                    alt="example"
                                    src="https://img11.360buyimg.com/seckillcms/s500x500_jfs/t1/154874/15/10042/146384/5fd820cbEb6b827c9/146663be0071d7e7.png"/>
                            <a-card-meta title="IQO 多能饼干">
                                <template slot="description">
                                    <span style="line-break: auto">原价 ￥ 121</span>
                                </template>
                            </a-card-meta>
                            <div style="color: #E01222">
                                ￥
                                <span style="font-size: 24px">
                                9.9
                                    <a-button
                                            style="float: right;border:none;background: #E01222;color: white">立即抢购</a-button>
                            </span>
                            </div>
                        </a-card>
                    </a-col>


                </a-row>
            </a-col>-->
        </a-row>
    </div>
</template>

<script>

    import cateApi from "../api/cateApi";
    import brandApi from "../api/goods/brandApi";
    import MmSwiper from "../components/goods/detail/mmSwiper";
    import SwiperCommon from "../components/goods/detail/swiperCommon";

    export default {
        name: "home",
        components: {SwiperCommon, MmSwiper},
        data() {
            return {
                selectedCates: [],
                treeData: [],
                cate2Data: [],
                cate2Visible: false,
                hotBrandList: [],
                carouselPictureList:[
                    "https://img11.360buyimg.com/da/s1180x940_jfs/t1/140507/17/18576/78794/5fd96285E993443be/7c3529917f8edd1e.jpg.webp",
                    "https://img10.360buyimg.com/pop/s1180x940_jfs/t1/133284/15/9520/84811/5f59ffb7E86c6de85/59e079e5b0f979db.jpg.webp",
                    "https://img11.360buyimg.com/da/s1180x940_jfs/t1/140507/17/18576/78794/5fd96285E993443be/7c3529917f8edd1e.jpg.webp",
                    "https://img11.360buyimg.com/da/s1180x940_jfs/t1/140507/17/18576/78794/5fd96285E993443be/7c3529917f8edd1e.jpg.webp"
                ]
            }
        },
        created() {
            this.fetCateTree()
            this.hotBrand();
        },
        methods: {

            toSearch(cate3) {
                this.$router.push(`/search?cid3=${cate3.id}`)
            },
            /**
             * 到品牌店铺中
             */
            toBrandShop(shopUrl) {
                if (shopUrl) {
                    window.location.href = shopUrl;
                }
            },
            hotBrand() {
                brandApi.hotBrand().then(resp => {
                    if (resp.data.flag) {
                        this.hotBrandList = resp.data.data
                    }
                })
            },
            /**
             * 打开二级分级
             */
            showCate2(data, show, e) {
                //阻止冒泡到最外层的card
                if (e && e.preventDefault()) {
                }
                if (data && data.children) {
                    this.cate2Data = data.children
                }
                this.cate2Visible = show;

            },

            fetCateTree() {
                cateApi.categoryTree().then(resp => {
                    let respData = resp.data;
                    if (respData.flag) {

                        // this.addSlot(respData.data)
                        this.treeData = respData.data
                    }
                })
            },
            handleChange(tag, checked) {
                const {selectedTags} = this;
                const nextSelectedTags = checked
                    ? [...selectedTags, tag]
                    : selectedTags.filter(t => t !== tag);
                console.log('You are interested in: ', nextSelectedTags);
                this.selectedTags = nextSelectedTags;
            },

            toKillPage() {
                this.$router.push("/kill-maimao")
            }
        }
    }
</script>

<style scoped>

    .cate-item:hover {
        cursor: pointer;
        color: #ef601d;
    }


    .cate3-item:hover {
        color: #ef601d;

    }

    .cate3-item {
        color: #666;
        font-size: 12px;
        height: 16px;

    }

    .cate23Card {
        float: top;
        width: 800px
    }

    .cate2-item {
        margin-top: 0;
        font-weight: 700;
        font-size: 12px
    }

    .ant-carousel >>> .slick-slide {
        height: 480px;
        overflow: hidden;
    }

    .ant-card-body {
        padding: 0px;
    }

    .sec-kill-title {
        width: 100%;
        left: 50px;
        position: absolute;
        color: white;
        font-size: 30px;
        text-align: center;

    }
</style>